<template>
  <div class="aui-card-list">
    <uni-list-query-card :queryShow="queryShow" @query-click="getDataList()" @click="(e)=>{this.queryShow=e}" @searchReset="searchReset()">
      <el-col :span="6">
        <el-form-item field="deptName" class="online-list" label="部门">
          <uni-tree-select v-model="dataForm.deptId" ref="treeSelectDept" treeUrl="/sys/dept/list" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="$t('online.username')">
          <el-input v-model="dataForm.username" :placeholder="$t('online.username')" clearable></el-input>
        </el-form-item>
      </el-col>
    </uni-list-query-card>
    <el-card shadow="never" class="aui-card-list-body">
      <vxe-toolbar :setting="{immediate:true}">
        <template v-slot:buttons>
          <el-button v-if="$hasPermission('sys:online:fquit')" type="primary" @click="fquit()">{{
            $t('online.fquit') }}</el-button>
        </template>
        <template v-slot:tools>
          <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
          <el-dropdown trigger="click" style="padding-left: 5px;" placement="bottom">
            <el-button icon="el-icon-download" circle>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-bottom" @click.native="exportHandle(true)">导出当前页</el-dropdown-item>
              <el-dropdown-item icon="el-icon-download" @click.native="exportHandle()">全部导出
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <el-button icon="el-icon-download" @click="$refs.xTable.openExport()" circle></el-button> -->
        </template>
      </vxe-toolbar>
      <div class="mod-sys__online">
        <vxe-table :loading="dataListLoading" :data="dataList" ref="xTable" auto-resize class="vxe-table-element" remote-sort @sort-change="dataListSortChangeHandle" @select-change="dataListSelectionChangeHandleVex" @select-all="dataListSelectionAllChangeHandleVex">
          <vxe-table-column type="selection" header-align="center" align="center" width="50"></vxe-table-column>
          <vxe-table-column field="username" title="online.username" header-align="center" align="center" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.realName }}({{ scope.row.username }})</span>
            </template>
          </vxe-table-column>
          <vxe-table-column field="deptName" title="online.deptName" header-align="center" align="center" width="140">
          </vxe-table-column>
          <vxe-table-column field="ip" title="online.ip" header-align="center" align="center"></vxe-table-column>
          <vxe-table-column field="userAgent" title="online.Browser" header-align="center" align="center">
            <template slot-scope="scope">
              {{ userAgent(scope.row.userAgent).browser }}
            </template>
          </vxe-table-column>
          <vxe-table-column field="userAgent" title="online.OS" header-align="center" align="center">
            <template slot-scope="scope">
              {{ userAgent(scope.row.userAgent).os }}
            </template>
          </vxe-table-column>
          <vxe-table-column field="status" title="online.status" header-align="center" align="center" width="100">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.status }}</el-tag>
            </template>
          </vxe-table-column>
          <vxe-table-column field="createDate" title="online.createDate" sortable="custom" header-align="center" align="center" width="160"></vxe-table-column>
          <vxe-table-column field="updateDate" title="online.updateDate" header-align="center" align="center" width="160"></vxe-table-column>
          <vxe-table-column title="handle" header-align="center" align="center" width="80" v-if="$hasPermission('sys:online:fquit')">
            <template slot-scope="scope">
              <el-button v-if="$hasPermission('sys:online:fquit')" type="text" icon="el-icon-finished" size="small" @click="fquit(scope.row.userId)">{{
                $t('online.fquit') }}</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import debounce from 'lodash/debounce'
import { fnUserAgent } from '@/utils/ua'
import { isEmpty } from '@/utils/validate'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/sys/online/page',
        getDataListIsPage: true,
        exportURL: '/sys/online/export'
      },
      deptListVisible: false,
      deptList: [],
      dataForm: {
        username: '',
        deptId: '',
        deptName: ''
      }
    }
  },
  components: {},
  activated () {
    this.init()
  },
  methods: {
    init () {
      this.$nextTick(() => {
        Promise.all([
          this.getDeptList()
        ]).then(() => {
        })
      })
    },
    // 识别设备
    userAgent (userAgent) {
      return fnUserAgent(userAgent)
    },
    // 所属部门树, 选中
    deptListTreeCurrentChangeHandle (data, node) {
      this.dataForm.deptId = data.id
      this.dataForm.deptName = data.name
      this.deptListVisible = false
    },
    // 所属部门清空
    clearDeptSelect () {
      this.dataForm.deptId = ''
      this.dataForm.deptName = ''
      this.deptListVisible = false
    },
    // 获取部门列表
    // getDeptList () {
    //   return this.$http.get('/sys/dept/list').then(({ data: res }) => {
    //     if (res.code !== 0) {
    //       return
    //     }
    //     this.deptList = this.$utils.treeDataTranslate(res.data)
    //   }).catch(() => { })
    // },
    // 强退
    fquit: debounce(function (userId) {
      let userIds = userId ? [userId] : this.dataListSelections.map(item => item['userId'])
      if (isEmpty(userIds)) {
        return this.$message.error(this.$t('prompt.select'))
      }
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('online.fquit') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$http.post('/sys/online/fquit', {
          userIds: userIds
        }).then(({ data: res }) => {
          if (res.code !== 0) {
            return
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.getDataList()
            }
          })
        }).catch(() => { })
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
